<template>
    <div id="intelligenceInquiry_add">
        <div class="top">
            <van-nav-bar
                title="查新详情"
                left-arrow
                @click-left="$router.push('/intelligenceInquiry')"
            />
        </div>
        <div id="preview" v-show="isShow">
            <div v-html="htmlText"></div>
        </div>
        <van-form
            v-show="!isShow"
            label-width="auto"
            :colon="true"
            label-align="left"
            input-align="left"
            readonly
        >
            <van-field
                v-model="form.chineseName"
                name="查新中文名"
                label="查新中文名"
            />
            <van-field
                v-model="form.englishName"
                name="查新英文名"
                label="查新英文名"
            />
            <van-field
                v-model="form.term"
                name="中文检索词"
                label="中文检索词"
            />
            <van-field
                v-model="form.gist"
                name="科学技术要点"
                label="科学技术要点"
            />
            <van-field
                v-model="form.noveltyRetrievalPoint"
                name="查新点"
                label="查新点"
            />
            <van-field
                name="查新目的"
                label="查新目的"
                readonly
                clickable
                :value="form.purpose"
            >
            </van-field>
            <van-field
                v-if="form.otherPurpose"
                name="查新目的"
                label="查新目的其他说明"
                readonly
                clickable
                :value="form.otherPurpose"
            >
            </van-field>
            <van-field
                name="服务查新类别"
                label="服务查新类别"
                readonly
                clickable
                :value="form.category"
            />
            <van-field v-model="form.ifUrgent" name="是否加急" label="是否加急">
            </van-field>
            <van-field
                v-model="form.completedDays"
                name="加急天数"
                label="加急天数"
            />
            <van-field
                v-show="form.noveltySearchPurpose != '专有技术查新'"
                v-model="form.urgentCause"
                name="加急原因"
                label="加急原因"
            />
            <van-field v-model="form.consignorW" name="委托人" label="委托人" />
            <van-field
                label="委托日期"
                readonly
                clickable
                name="calendar"
                :value="form.entrustDate"
            />
            <van-field
                :value="form.orgNameW"
                name="法人机构名称(外部)"
                label="法人机构名称(外部)"
                type="textarea"
            />
            <van-field v-model="form.phone" name="电话" label="电话" />
            <van-field v-model="form.email" name="邮件" label="邮件" />
            <van-field
                v-model="form.postalCode"
                name="邮政编码"
                label="邮政编码"
                
            />
            <van-field
                v-model="form.mailingAdd"
                name="通信地址"
                label="通信地址"
            />
            <van-field
                v-model="form.numberOfReports"
                name="报告份数"
                label="报告份数"
            />
            <!-- <van-field
                name="查新报告"
                label="查新报告"
            /> -->
            <van-field name="查新报告" label="查新报告">
                <template #input>
                    <span      
                        class="dataContentVo"
                        v-for="item in form.cxbghpbb"
                        :key="item.id"
                        @click="upload(item.id)"
                        >
                        {{ item.name }}</span
                    >
                </template>
            </van-field>
            <!-- <van-field
                v-model="form.signContract"
                name="是否签订开口合同"
                label="是否签订开口合同"
            >
            </van-field>
            <van-field
                v-show="form.signContract == '是'"
                v-model="form.contractName"
                name="合同名称"
                label="合同名称"
            />
            <van-field
                v-show="form.signContract == '是'"
                name="合同编号"
                label="合同编号"
            >
                <template #input>
                    <span>{{ form.contractCode }}</span>
                </template>
            </van-field> -->

            <van-field style="display: block" name="form.list" label="资料列表">
                <template #input>
                    <div class="list">
                        <div
                            v-for="(item, index) in dataList"
                            :class="
                                item.checked == 1
                                    ? 'active-item'
                                    : 'datalist-item'
                            "
                            :key="index"
                        >
                            {{ item.name }}
                        </div>
                    </div>
                </template>
            </van-field>
            <van-field
                v-model="form.otherForm"
                name="otherForm"
                v-if="form.othersSpecify == 1"
                label="资料列表其他注明"
            />
            <van-field name="资料内容" label="资料内容">
                <template #input>
                    <span      
                        class="dataContentVo"
                        v-for="item in form.dataContentVo"
                        :key="item.fileurl"
                        @click="upload(item.fileurl)"
                        >
                        <!-- :href="`${baseurl}/file/downloadService/${item.fileurl}?access_token=${access_token}`" -->
                        {{ item.filename }}</span
                    >
                </template>
            </van-field>
            <van-field v-model="form.copies" name="资料份数" label="资料份数" />
            <!-- <van-field
                :value="form.securityClassification"
                name="密级"
                label="密级"
                readonly
            /> -->
        </van-form>
    </div>
</template>
<script>
import { Toast } from "vant";
import api from "../../http/api";
import { BASEURL } from "../../http/apiUrl";
export default {
    data() {
        return {
            isShow:false,
            htmlText:'',
            baseurl: null,
            access_token: null,
            form: {},
            // 资料列表
            dataList: [
                { name: "开题报告", key: "openingReport", checked: 0 },
                { name: "研制报告", key: "researchReport", checked: 0 },
                { name: "总结报告", key: "finalReport", checked: 0 },
                { name: "成果申报表", key: "declarationForm", checked: 0 },
                { name: "专利说明书", key: "patentSpecification", checked: 0 },
                { name: "产品样本", key: "catalogue", checked: 0 },
                { name: "监测报告", key: "testReport", checked: 0 },
                { name: "用户报告", key: "userReport", checked: 0 },
                { name: "技术报告", key: "technicalReport", checked: 0 },
                { name: "可行性报告", key: "feasibilityReport", checked: 0 },
                { name: "报奖材料", key: "winMaterial", checked: 0 },
                { name: "其他请注明", key: "othersSpecify", checked: 0 },
            ],
        };
    },
    mounted() {
        document.getElementById('preview').style.width = window.screen.width +'px'
        this.baseurl = BASEURL;
        this.access_token = localStorage.frameToken;
        this.getData();
    },
    methods: {
        
        // 附件预览
    upload(id){
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      api.equipment
        .checkTheCertificateDetails(id)
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) return Toast.fail(msg);
          // console.log('设备详情data :>> ', data);
          this.htmlText = data
          this.isShow = true
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });
  
        },
        /**
         * 获取详情
         */
        getData() {
            Toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
            });
            api.intelligenceInquiry
                .getIntelligenceById({ id: this.$route.query.id })
                .then((res) => {
                    Toast.clear();
                    // console.log(res);
                    if (res.data.code == 200) {
                        this.form = res.data.data;
                        this.dataList.map((item) => {
                            switch (item.key) {
                                case "openingReport":
                                    item.checked = res.data.data.openingReport;
                                    break;
                                case "researchReport":
                                    item.checked = res.data.data.researchReport;
                                    break;
                                case "finalReport":
                                    item.checked = res.data.data.finalReport;
                                    break;
                                case "declarationForm":
                                    item.checked =
                                        res.data.data.declarationForm;
                                    break;
                                case "patentSpecification":
                                    item.checked =
                                        res.data.data.patentSpecification;
                                    break;
                                case "catalogue":
                                    item.checked = res.data.data.catalogue;
                                    break;
                                case "testReport":
                                    item.checked = res.data.data.testReport;
                                    break;
                                case "userReport":
                                    item.checked = res.data.data.userReport;
                                    break;
                                case "technicalReport":
                                    item.checked =
                                        res.data.data.technicalReport;
                                    break;
                                case "feasibilityReport":
                                    item.checked =
                                        res.data.data.feasibilityReport;
                                    break;
                                case "winMaterial":
                                    item.checked = res.data.data.winMaterial;
                                    break;
                                case "othersSpecify":
                                    item.checked = res.data.data.othersSpecify;
                                    break;
                                default:
                                    break;
                            }
                        });
                    }
                });
        },
    },
};
</script>

<style lang="less" scoped>
#preview{
    position: absolute;
    height: 100%;
    background-color: #fff;
    img{
        width: 100%;
    }
}
#intelligenceInquiry_add {
    width: 100vw;
    padding-top: 51px;
    min-height: calc(100vh - 64px);
    box-sizing: border-box;
    .top {
        position: fixed;
        width: 100%;
        top: 0;
        overflow: hidden;
        background-color: white;
        z-index: 1;
    }
    .van-form {
        /deep/ .van-checkbox--horizontal {
            padding: 10px;
            margin: 0;
        }
        /deep/ .van-radio--horizontal {
            overflow: visible;
        }
        .list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 150px;
        }
        .datalist-item {
            width: 109px;
            height: 32px;
            line-height: 32px;
            background: #f5f5f5;
            border-radius: 16px;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid transparent;
        }
        .active-item {
            width: 109px;
            height: 32px;
            line-height: 32px;
            background: rgba(14, 134, 209, 0.2);
            border: 1px solid #0e86d1;
            border-radius: 16px;
            font-family: "ABeeZee";
            font-style: normal;
            font-weight: 400;
            box-sizing: border-box;
            font-size: 14px;
            /* identical to box height, or 143% */

            text-align: center;
            letter-spacing: -0.24px;

            color: #0e86d1;
            z-index: 1;
        }
    }
    .dataContentVo {
        color: blue;
        padding: 0 15px;
    }
    .submit {
        padding: 10px;
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 64px;
        box-sizing: border-box;
        background-color: #f5f5f5;
        /deep/ .van-button--block {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 10px 143.5px;
            gap: 10px;
            background: #0e86d1;
            border-radius: 4px;
        }
    }
}
/deep/ .van-ellipsis {
    overflow: visible;
}
/deep/ .van-nav-bar__left {
    padding: 10px;
}
/deep/ .van-ellipsis {
    overflow: visible;
}
/deep/ .van-nav-bar__content {
    height: 51px;
}
/deep/ .van-nav-bar__title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    /* identical to box height, or 111% */

    text-align: center;
    letter-spacing: -0.24px;

    color: #333333;
}
/deep/ .van-nav-bar .van-icon {
    /* 文字颜色3 */

    color: #999999;
}
/deep/ .van-field__control::-webkit-input-placeholder {
    text-align: right;
}
/deep/ .van-field__control {
    flex-wrap: wrap;
}
/deep/ .van-uploader__file-name {
    overflow: hidden;
}
/deep/ .van-uploader__input-wrapper {
    display: flex;
    align-items: center;
}
/deep/ .van-uploader__file-icon {
    display: none;
}
/deep/ .van-uploader__file {
    width: auto;
    height: auto;
    background-color: transparent;
}
/deep/ .van-radio-group--horizontal {
    justify-content: flex-end;
    width: 100%;
}
</style>